<template>
  <div>
    <Table :columns="columns" :paginatedData="paginatedData" :btnList="btnList" :btnListTable="btnListTable"
      :isFixedColumn="true" :columnWidth="100" :isMore="false" :isEndColumns="false" :footerBtnList="footerBtnList"
      :EndColumnsData="EndColumnsData" :tableLoading="loading" :total="total" :cellStyle="cellStyle"
      @pageSize="handlePageSize" @currentPage="handleCurrentPage">
      <!-- 条件组,插槽 -->
      <template #default>
        <el-form :inline="true" :model="formBtnList" class="demo-form-inline" @submit.native.prevent>
          <el-form-item label="">
            <el-select v-model="formBtnList.status" placeholder="评论状态" style="width: 140px" @change="handleOnSelect">
              <el-option v-for="item in languageOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="formBtnList.user_id" :prefix-icon="Search" placeholder="用户ID" />
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="formBtnList.comments_id" :prefix-icon="Search" placeholder="评论ID" />
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="formBtnList.funplay_id" :prefix-icon="Search" placeholder="内容ID" />
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="formBtnList.parent_id" :prefix-icon="Search" placeholder="父项评论ID" />
          </el-form-item>
          <el-form-item label="">
            <el-date-picker v-model="dateList" style="width: 240px" type="daterange" unlink-panels range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" value-format="YYYY-MM-DD"
              format="YYYY-MM-DD" @change="handleDateChange" />
          </el-form-item>
        </el-form>
      </template>
    </Table>

    <!-- 弹窗 -->
    <DialogCom ref="dialogCom" :dialogVisible="dialogVisible" :btnLoading="btnLoading" :tableTitle="tableTitle"
      :formData="formData" :ruleForm="ruleForm" :rules="rules" @beforeClose="beforeClose" @dialogSwitch="dialogSwitch"
      @submitForm="submitForm" />

    <commentManagementDialog ref="dialogCom" :dialogVisible="dialogVisible2" :btnLoading="btnLoading2"
      :ruleForm="ruleForm" :tableTitle="tableTitle2" :productKey="formBtnList.product_key" :titleIDText="titleIDText"
      @beforeClose="beforeClose" @submitForm="submitForm">
    </commentManagementDialog>
  </div>
</template>

<script setup lang='ts' name="commodityMent">
import { ref, reactive, onMounted } from 'vue'
import type { FormRules, TableColumnCtx } from 'element-plus'
import Table from '@/components/Table.vue';
import DialogCom from '@/components/DialogCom.vue';
import commentManagementDialog from './commentManagementDialog.vue';
import { Search } from '@element-plus/icons-vue'
import { commentList, comment, commentDel } from '@/api/seriesMent/index.ts'
import { useRouteStore } from '@/stores/modules/counter.ts'
const routeStore = useRouteStore();
// 表格相关 开始
const loading = ref(false)
const btnLoading2 = ref(false)
const tableTitle2 = ref('');
const titleIDText = ref('');
// const product_key = ref('');
// 表头数据
const columns = ref([
  { prop: 'comment_id', label: '评论ID', width: 100 },
  { prop: 'user_id', label: '用户ID', width: 100 },
  { prop: 'user_name', label: '用户名', width: 120 },
  { prop: 'content', label: '评论内容', width: '' },
  { prop: 'add_time', label: '评论时间', width: 210 },
  { prop: 'funplay_id', label: '内容ID', width: '150' },
  { prop: 'parent_id', label: '父项评论ID', width: 150, },
  { prop: 'status', label: '评论状态', width: 110, formatter: (row: any) => row.status == '1' ? '已上架' : '已下架' },
]);
// 固定最右侧列
const EndColumnsData = ref({ prop: 'status', label: '评论状态', width: 100, formatter: (row: any) => row.status == '1' ? '已上架' : '已下架' })
// 设置单元格样式
interface rowData {
  status: string
}
const cellStyle = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: {
  row: rowData
  column: TableColumnCtx<rowData>
  rowIndex: number
  columnIndex: number
}) => {
  if (row.status == '0') {
    return { color: "red" };
  } else if (row.status == '1') {
    return { color: "green" };
  }
}
// 表格数据
// 判断依据: judData
const paginatedData = ref([])
// 查询条件
const formBtnList = reactive({
  // lang: '',
  status: '',
  user_name: '',
  user_id: '',
  comments_id: '',
  parent_id: '',
  funplay_id: '',
  time_start: '',
  time_end: '',
  page_size: 10,
  page: 1,
})
const dateList = ref([])
// 日期快速选择
const shortcuts = [
  {
    text: '近1周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近30天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近90天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
// 日期选择
const handleDateChange = () => {
  formBtnList.time_start = dateList.value[0]
  formBtnList.time_end = dateList.value[1]
}
const handleOnSelect = () => {
  handInquire()
}
let languageOptions = ref([
  {
    value: '',
    label: '全部',
  },
  {
    value: '0',
    label: '下架',
  },
  {
    value: '1',
    label: '上架',
  },

])
const total = ref(0)
// 查询
const handInquire = () => {
  loading.value = true
  commentList(formBtnList, 'cn').then((res: any) => {
    if (res.code === 200) {
      total.value = res.data.total
      const processedData = res.data.comment.map((item: Object) => {
        return {
          ...item,
          judData: item.status  // 添加 judData 属性，并赋值为 status
        };
      });
      paginatedData.value = processedData
    } else {
      paginatedData.value = []
      ElMessage.error(`错误: ${res.msg}`)
    }
  }).catch((error: any) => {
    paginatedData.value = []
    ElMessage.error(`请求错误: ${error}`)
  }).finally(() => {
    loading.value = false
  })
}
interface RuleForm {
  style_name: string
}
interface RuleFormItem {
  comment_id: string;
  style_name: string;
  status: string;
  product_key: string;
}
// 表单数据
const ruleForm = ref<RuleFormItem[]>([]);
// 上架
const listed = (row: object, index: number) => {
  console.log(row);
  ElMessageBox.confirm(
    '是否上架?',
    '上架',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      let para = {
        comment_id: row.comment_id,
        status: '1',
      }
      comment(para).then((res: any) => {
        if (res.code === 200) {
          ElMessage({
            message: '成功',
            type: 'success',
          })
        } else {
          ElMessage.error(`请求错误: ${res.msg}`)
        }
      }).catch((error: any) => {
        ElMessage.error(`请求错误: ${error.msg}`)
      }).finally(() => {
        handInquire()
      })
    })
    .catch(() => {

    })
}
// 下架
const removed = (row: object, index: number) => {
  ElMessageBox.confirm(
    '是否下架?',
    '下架',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      let para = {
        comment_id: row.comment_id,
        status: '0',
      }
      comment(para).then((res: any) => {
        if (res.code === 200) {
          ElMessage({
            message: '成功',
            type: 'success',
          })
        } else {
          ElMessage.error(`请求错误: ${res.msg}`)
        }
      }).catch((error: any) => {
        ElMessage.error(`请求错误: ${error.msg}`)
      }).finally(() => {
        handInquire()
      })
    })
    .catch(() => {

    })
}
// 重置
const handDerived = () => {
  // console.log('重置')
  // formBtnList.lang = 'cn'
  formBtnList.status = ''
  formBtnList.user_name = ''
  formBtnList.user_id = ''
  formBtnList.comments_id = ''
  formBtnList.parent_id = ''
  formBtnList.funplay_id = ''
  formBtnList.time_start = ''
  formBtnList.time_end = ''
  dateList.value = []
  handInquire()
}
// 按钮组
const btnList = [
  { name: '查询', type: 'primary', click: handInquire, icon: '' },
  { name: '重置', type: 'success', click: handDerived, icon: '' },
]
const footerBtnList: any[] = [
  // { name: '新增', type: 'primary', click: handAddAccount, icon: '' },
]
// 删除
const reject = (row: object, index: number) => {
  ElMessageBox.confirm(
    '确定删除此项吗？',
    '删除',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  ).then(() => {
    commentDel(row.comment_id).then((res: any) => {
      if (res.code === 200) {
        ElMessage({
          message: '成功',
          type: 'success',
        })
      } else {
        ElMessage.error(`请求错误: ${res.msg}`)
      }
    }).catch(() => {
    }).finally(() => {
      handInquire()
    })
  }).catch(() => {

  })
}
// 表单控件数据
let formData = reactive([
  { type: 'input', label: '款式名称', prop: 'style_name', span: 24, placeholder: '请输入' },
  { type: 'input', label: '款式描述', prop: 'style_desc', span: 24, placeholder: '请输入' },
  // { type: 'input', label: '名称', prop: 'style_name', span: 24, placeholder: '请输入' },
])
// 操作列按钮组
const btnListTable = ref([
  { name: '上架', type: 'primary', click: listed, judgment: true, isShow: ['0'], },
  { name: '下架', type: 'warning', click: removed, judgment: true, isShow: ['1'], },
  // { name: '删除', type: 'danger', click: reject },
])
// 分页事件触发
const handlePageSize = (pageSize: number) => {// 每页大小
  // console.log('handlePageSize', pageSize);
  formBtnList.page_size = pageSize
  handInquire()
};
const handleCurrentPage = (currentPage: number) => {// 页码
  // console.log('handleCurrentPage', currentPage);
  formBtnList.page = currentPage
  handInquire()
};
// 表格相关 结束

// 弹窗相关
const dialogCom = ref<InstanceType<typeof DialogCom>>();
const btnLoading = ref(false)
// 表单校验配置
const rules = reactive<FormRules<RuleForm>>({
  style_name: [
    { required: true, message: '此项为必填项', trigger: 'blur' },
  ],
})
// 弹窗 确认按钮
const submitForm = ((ruleFormData: any) => {

})
// 标题
const tableTitle = ref('');
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const beforeClose = () => {
  titleIDText.value = ''
  dialogVisible.value = false;
  dialogVisible2.value = false;
}
const dialogSwitch = (row: object) => {
  console.log('row: ', row);

}

onMounted(() => {
  handInquire()
})
</script>
<style lang='scss' scoped>
.demo-form-inline {
  .el-input {
    width: 160px;
  }

  :deep(.el-date-editor) {
    width: 240px;
  }

  :deep(.el-input__wrapper) {
    border-radius: 20px;
  }
}
</style>